<template>
  <div class="login">
    <!--<div class="tip3" v-if="tip3">-->
    <!--<i></i><span>该用户不存在</span>-->
    <!--</div>-->
    <!--<div class="login-box">-->
    <!--<div class="tip1" v-if="tip1">-->
    <!--您输入的手机格式有误，请重新输入-->
    <!--</div>-->
    <!--<div class="tip2" v-if="tip2">-->
    <!--密码错误，请重新输入-->
    <!--</div>-->
    <!--<div class="title">-->
    <!--<i class="i1"></i>-->
    <!--</div>-->
    <div class="body">
      <div class="phone">
        <p>手机号</p>
        <input type="text" placeholder="请输入手机号" v-model="user.phoneNumber" @blur="checkNumber"
               onkeypress="return /[\d]/.test(String.fromCharCode(event.keyCode))">
      </div>
      <div class="password">
        <p>密码</p>
        <input type="password" placeholder="请输入密码" v-model="user.password"
               onkeypress="return /[\w]/.test(String.fromCharCode(event.keyCode))">
      </div>
      <div class="button">
        <button @click="submit">登录</button>
      </div>
      <div class="skip">
        <span class="sp1" @click="turnRegister">注册</span><span class="sp2">忘记密码?</span>
      </div>
      <div class="wx">
        <i class="i2"></i> <span>使用微信</span>
      </div>
    </div>
<div class="tip" v-if="tip1">手机号格式或密码有误</div>  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        user: {
          phoneNumber: '',
          password: ''
        },
        tip1: false,
        tip2: false,
        tip3: false,
        id: '',
        log: '',
        username: ''
      }
    },
    methods: {
      checkNumber() {
        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.user.phoneNumber))) {
          this.tip1 = true;
        } else {
          this.tip1 = false;
        }
      },
  }
</script>

<style scoped>
  .login {
    /*width: 100%;*/
    /*height: 100vh;*/
    /*position: relative;*/
  }

  .body {
    box-sizing: border-box;
    position: absolute;
    top: 205px;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    height: 480px;
    /*background-color: red;*/
    border-radius: 8px;
    box-shadow: 0px 0px 10px 1px rgba(240, 240, 240, 1);
    border: 1px solid rgba(240, 240, 240, 1);
  }

  .phone {
    width: 350px;
    margin: 50px 0 0 40px;
  }

  .phone p {
    color: rgba(141, 141, 141, 1);
    font-size: 14px;
    font-family: SourceHanSansSC-regular;
  }

  .phone input {
    box-sizing: border-box;
    outline: none;
    width: 100%;
    height: 50px;
    background: rgba(249, 249, 249, 1);
    border-radius: 4px;
    border: 1px solid rgb(230, 230, 230);
    padding-left: 8px;
    color: #333;
  }

  .password {
    width: 350px;
    margin: 18px 0 0 40px;
  }

  .password p {
    color: rgba(141, 141, 141, 1);
    font-size: 14px;
    font-family: SourceHanSansSC-regular;
  }

  .password input {
    box-sizing: border-box;
    outline: none;
    width: 100%;
    height: 50px;
    background: rgba(249, 249, 249, 1);
    border-radius: 4px;
    border: 1px solid rgb(230, 230, 230);
    padding-left: 8px;
    color: #333;
  }

  .button {
    width: 350px;
    height: 50px;
    margin: 20px 0 0 40px;
  }

  .button button {
    width: 350px;
    height: 50px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(22, 174, 156, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 0px 10px 1px rgba(22, 174, 156, 0.5);
    font-family: Roboto;
  }

  .skip {
    width: 350px;
    margin: 16px auto;

  }

  .sp1 {
    color: rgba(141, 141, 141, 1);
    font-size: 14px;
    float: left;
    font-family: SourceHanSansSC-regular;
  }

  .sp2 {
    color: rgba(141, 141, 141, 1);
    font-size: 14px;
    float: right;
    font-family: SourceHanSansSC-regular;
  }

  .wx {
    width: 100%;
    height: 23px;
    margin: 55px auto;
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .wx i {
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url("../../static/imgs/wx.png") no-repeat;
    background-size: cover;
  }

  .wx span {
    display: block;
    height: 23px;
    font-size: 14px;
    color: rgba(187, 187, 187, 1);
    padding-left: 6px;
  }
  .tip{
    position: absolute;
    top: 305px;
    left: 62%;
    color: rgba(255, 72, 72, 1);
    font-size: 10px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
</style>
